body,html,*{ list-style-type: none; font-size:16px; padding: 0px;margin: 0px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
body{
    background-color: #2E8B57;
}
#all{
    margin: 0 auto;
    width: 1200px;
    height: 100%;
    }
.line_li{
    width: 100px;
    max-width: 100px;
    height: 100vh;
    float: left;
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
}
.line_li::before{
    content:"";
    display: block;
    border-radius: 15px;
    width: 100%;
    height: 150px;
    border: 2px dashed #cccccc;
}
.line_li_move{
    animation: line_li_moves .5s;
	box-shadow: 1px 40px 30px 10px #9ACD32
}
.poker{
    user-select: none;
    width: 100px;
    height: 150px;
    border-radius: 10px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 2px solid #c5c5c5;
    background-color: #ededed;
}
.canmove{
    cursor: move;
}
.canmove:hover{
    height: 152px;
    width: 102px;
    border:3px solid #e79528 !important;
}
.add_poker{
    z-index:9;
    position: absolute;
    box-shadow:15px 10px 10px #083508;
    animation: card_move 1s;
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
    text-indent:1.3em;
    width: 100px;
    height: 150px;
    border-radius: 10px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 2px solid #c5c5c5;
    background-color: #ededed;
}

.bottom2{
	z-index: -998;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    border-radius: 15px;
    transition: all 1s;
    width: 100px;
    background-color: #2E8B57;
    height: 150px;
    border: 2px dashed #cccccc;
}
.getover{
	z-index: -998;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: block;
    border-radius: 15px;
    transition: all 1s;
    width: 100px;
    background-color: #2E8B57;
    height: 150px;
    border: 2px dashed #cccccc;
}
.bottom_font{
    position: fixed;
    bottom: 20px;
    right: 20px;
    line-height: 140px;
    text-align: center;
    font-size: 50px;
    color: aliceblue;
    transition: all 1s;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    background-color: #2E8B57;
    background-image: url('../img/backimg.png')
}
.bottom_over{
    position: fixed;
    bottom: 20px;
    left: 20px;
    line-height: 140px;
    text-align: center;
    font-size: 50px;
    color: aliceblue;
    transition: all 1s;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    background-color: #2E8B57;
    background-image: url('../img/backimg.png')
}
.overpoker{
    position: absolute;
    left: -1px !important;
    top: 0px !important;
	z-index: -996;
    display: block;
    border-radius: 15px;
    transition: all 1s;
    width: 100px;
    height: 150px;
    background-image: url('../img/backimg.png')
}



@keyframes card_move
{
0% {
    opacity: 0.8;
	box-shadow: 1px 1px 5px 5px #E79528;
    position: absolute;
    background-size: 20px 20px;
    background-position: 5px 5px;
}

100% {
    opacity: 1;
    position: absolute;
    background-position: 0 0;
    background-size: 20px 20px;
    background-position: 5px 5px;
}
}

@keyframes line_li_moves
{
0% {
	box-shadow: 1px 40px 5px 5px #9ACD32
}

100% {
	box-shadow: 1px 40px 30px 10px #9ACD32
}
}

@keyframes get_line_Over
{
0% {
    transform: rotateX(0deg);
}
20%{
    transform: rotateX(160deg);
}
100% {
    left: 20px;
    bottom: 20px;
    transform: rotateX(180deg);
}
}

.ht{
    color: #223442;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 5px 5px;
    background-image: url(../img/ht.png)
}
.mh{
    color: #223442;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 5px 5px;
    background-image: url(../img/mh.png)
}
.hx{
    color: #d4622e;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 5px 5px;
    background-image: url(../img/hx.png)
}
.fk{
    color: #d4622e;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 5px 5px;
    background-image: url(../img/fk.png)

}

.line_li :nth-child(1){
    position: absolute;
    top: 50px;
}
.line_li :nth-child(2){
    position: absolute;
    top: 85px;
}
.line_li :nth-child(3){
    position: absolute;
    top: 120px;
}
.line_li :nth-child(4){
    position: absolute;
    top: 155px;
}
.line_li :nth-child(5){
    position: absolute;
    top: 190px;
}
.line_li :nth-child(6){
    position: absolute;
    top: 225px;
}
.line_li :nth-child(7){
    position: absolute;
    top: 260px;
}
.line_li :nth-child(8){
    position: absolute;
    top: 295px;
}
.line_li :nth-child(9){
    position: absolute;
    top: 330px;
}
.line_li :nth-child(10){
    position: absolute;
    top: 365px;
}
.line_li :nth-child(11){
    position: absolute;
    top: 400px;
}
.line_li :nth-child(12){
    position: absolute;
    top: 435px;
}
.line_li :nth-child(13){
    position: absolute;
    top: 470px;
}
.line_li :nth-child(14){
    position: absolute;
    top: 505px;
}
.line_li :nth-child(15){
    position: absolute;
    top: 540px;
}
.line_li :nth-child(16){
    position: absolute;
    top: 575px;
}
.line_li :nth-child(17){
    position: absolute;
    top: 610px;
}
.line_li :nth-child(18){
    position: absolute;
    top: 645px;
}
.line_li :nth-child(19){
    position: absolute;
    top: 680px;
}
.line_li :nth-child(20){
    position: absolute;
    top: 715px;
}
.line_li :nth-child(21){
    position: absolute;
    top: 750px;
}
.line_li :nth-child(22){
    position: absolute;
    top: 785px;
}
.line_li :nth-child(23){
    position: absolute;
    top: 820px;
}
.line_li :nth-child(24){
    position: absolute;
    top: 855px;
}
.line_li :nth-child(25){
    position: absolute;
    top: 890px;
}